<template>
	<!-- https://ext.dcloud.net.cn/plugin?id=9724 -->
	<view class="container">
		<!-- 头部 -->
		<view class="box_top">
			<!-- title -->
			<view class="top_title">
				<view style="position: absolute; left:0" @click="reback()">
					<uni-icons type="left" size="24"></uni-icons>
				</view>
				<view><text>租房</text></view>
			</view>

			<!-- Tab切换栏 -->
			<view class="tab-bar">
				<view v-for="(item, idx) in tabList" :key="idx"
					:class="['tab-item', tabCurrentIndex === idx ? 'active' : '']" @click="tabChange(idx)">
					{{ item }}
				</view>
			</view>
		</view>



		<!-- 搜索栏+单选+地图找房 -->
		<view class="search-section">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#ccc"></uni-icons>
				<input class="search-input" placeholder="小区/商圈/地铁站" />
			</view>
			<view class="radio-group">
				<label v-for="item in radioList" :key="item.value">
					<radio :value="item.value" v-model="radioValue" />
					{{ item.label }}
				</label>
			</view>
			<view class="search-actions">
				<button class="search-btn">立即查找</button>
				<view class="map-btn">
					<image src="/static/img/map.png" style="width:60rpx;height:60rpx;" />
					<text>地图找房</text>
				</view>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="dadropdown-box">
		  <DaDropdownVue2
		      :dropdownMenu="dropdownMenuList"
		      @confirm="handleConfirm"
		      @close="handleClose"
		      @open="handleOpen">
		  </DaDropdownVue2>
		</view>
		
		
		<!-- 房源列表 -->
		<fangTemplate  style="width: 100%;" :res='flowList' :storeName='false'  />
		<view class="page-bottom"></view>


	</view>
</template>

<script>
	import fangTemplate from '@/components/m-goods-list/fangList'
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
	import {
		findHouseRoomList
	} from "@/api/house";
	import swpHomeHeader from './home-header.vue'
	import {
		getAddressItemByCode
	} from "../../../api/address";
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

	export default {
		components: {
			swpHomeHeader,
			fangTemplate,
			DaDropdownVue2,
			uniIcons
		},
		data() {
			return {
				dropdownMenuList: [{
						title: '区域',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						value: '', // 默认内容2
						options: uni.getStorageSync('address'),
					},
					{
						title: '租金',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						value: '', // 默认内容2
						options: [{
								label: '50  - 500元',
								value: 'less_than_500'
							},
							{
								label: '500 - 1000元',
								value: '500_to_1000'
							},
							{
								label: '1000 - 1500元',
								value: '1000_to_1500'
							},
							{
								label: '1500 - 2000元',
								value: '1500_to_2000'
							},
							{
								label: '2000 - 2500元',
								value: '2000_to_2500'
							},
							{
								label: '2500 - 3000元',
								value: '2500_to_3000'
							},
							{
								label: '3000 - 3500元',
								value: '3000_to_3500'
							},
							{
								label: '3500 - 4000元',
								value: '3500_to_4000'
							},
							{
								label: '4000 - 4500元',
								value: '4000_to_4500'
							},
							{
								label: '4500 - 5000元',
								value: '4500_to_5000'
							},
							{
								label: '5000 - 5500元',
								value: '5000_to_5500'
							},
							{
								label: '5500 - 6000元',
								value: '5500_to_6000'
							},
							{
								label: '6000 - 6500元',
								value: '6000_to_6500'
							},
							{
								label: '6500 - 7000元',
								value: '6500_to_7000'
							},
							{
								label: '7000 - 7500元',
								value: '7000_to_7500'
							},
							{
								label: '7500 - 8000元',
								value: '7500_to_8000'
							},
							{
								label: '8000元以上',
								value: 'more_than_8000'
							},
						],
					},
					// {
					//   title: '更多',
					//   type: 'cell',
					//   prop: 'god1',
					//   showAll: true,
					//   showIcon: true,
					//   value: '2', // 默认内容2
					//   options: [
					//     { label: '整租', value: '1', suffix: '' },
					//     { label: '短租', value: '2' },
					//     { label: '合租', value: '3' },
					//     { label: '公寓', value: '4' },
					//   ],
					// },
					{
						title: '排序',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						value: '', // 默认内容2
						options: [{
								label: '价格升序',
								value: '2'
							},
							{
								label: '价格降序',
								value: '3'
							},
							{
								label: '时间升序',
								value: '2'
							},
							{
								label: '时间降序',
								value: '3'
							},
						],
					},
					{
						title: '日期',
						type: 'daterange',
						prop: 'god6',
						// 默认选中 2022-01-01到2022-02-01
						value: {
							start: '',
							end: ''
						},
					},
				],
				loading: true,
				swiperCurrent: 0,
				themeColor: '#ee8a76', //f39700
				type: 1,
				wxTop: 0, //如果是微信小程序
				headerStyle: {
					backgroundColor: 'rgba(248,248,248,0.2)', //#F8F8F8
				},
				adv: [],
				nav: [],
				list: [],
				flowList: [],
				activity_goods: [],
				//
				district: '',
				fixed: false,
				topClass: [{
						id: -1,
						name: '整租'
					},
					{
						id: 2,
						name: '短租'
					},
					{
						id: 3,
						name: '合租'
					},
					{
						id: 4,
						name: '公寓'
					},
				],
				activeTrans: 0,
				tabCurrentIndex: 0,
				tabsTop: 0,
				pageNumber: 1, // 当前页码
				pageSize: 10, // 每页数量
				area: '',
				avgPrice: '',
				sort: '',
				startDate2: '',
				endDate: '',
				type: 0,
				tabList: ['整租', '合租', '短租', '公寓'],
				radioList: [{
						label: '不限',
						value: '0'
					},
					{
						label: '1层',
						value: '1'
					},
					{
						label: '2层',
						value: '2'
					},
					{
						label: '3层以上',
						value: '3'
					}
				],
				radioValue: '0',
				filterList: ['区域', '租金', '更多', '排序'],
			}
		},
		mounted() {

		},
		async onLoad() {
			// #ifdef H5
			// this.wxTop = 35
			this.headerStyle.paddingTop = 35 + 'rpx'
			// #endif
			this.findHouseRoomList();
			await this.init()

			var address = uni.getStorageSync('address');
			if ("" != address) {
				getAddressItemByCode(address.adcode).then(res => {
					// this.regionList = res.data.data;

					if ("" == uni.getStorageSync('addressData')) {

						uni.setStorageSync('addressData', res.data.data)
						//刷新此页面
						uni.reLaunch({
							url: '/pages/house/homeZu'
						});
					} else {
						uni.setStorageSync('addressData', res.data.data)

					}
				});
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			if (scroll > 25) {
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		onReachBottom() {
			this.pageNumber++;
			this.findHouseRoomList();

		},
		onPullDownRefresh() {
			this.pageNumber = 1; // 重置页码
			this.findHouseRoomList(true);
		},
		methods: {
			// 返回上一步
			reback() {
				// 返回上一步
				uni.navigateBack({
					delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面
				});
			},
			handleConfirm(v, selectedValue) {

				console.log('handleConfirm ==>', v, selectedValue)
			},
			handleClose(v, callbackMenuList) {
				if (v == 0) {
					this.area = callbackMenuList[0].activeTitle;
				} else if (v == 1) {
					this.avgPrice = callbackMenuList[1].activeTitle;
				} else if (v == 2) {
					this.sort = callbackMenuList[2].activeTitle;
				} else if (v == 3) {

					if (null != callbackMenuList[3].value) {
						this.startDate2 = callbackMenuList[3].value.start;
						this.endDate = callbackMenuList[3].value.end
					} else {
						this.startDate2 = null
						this.endDate = null
					}

				}
				this.pageNumber = 1;
				this.hasMore = true;
				this.flowList = []
				this.findHouseRoomList();
				console.log('handleClose ==>', v, callbackMenuList)
			},
			handleOpen(v) {

				console.log('handleOpen ==>', v)
			},
			findHouseRoomList(isRefresh = false) {
				if (isRefresh) {
					this.pageNumber = 1; // 刷新时重置页码
				}

				findHouseRoomList({
					type: this.type,
					state: 2,
					//villageCity: uni.getStorageSync("address").district,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					orderByColumn: 'update_time,create_time',
					isAsc: 'desc',
					area: this.area,
					avgPrice: this.avgPrice,
					sort: this.sort,
					startDate: this.startDate2,
					endDate: this.endDate,
					publicFlag: "true"
				}).then(res => {

					if (res.statusCode === 200) {
						if (isRefresh) {
							this.flowList = res.data.rows;
							uni.stopPullDownRefresh(); // 停止下拉刷新动画
						} else {
							this.flowList = this.flowList.concat(res.data.rows);
						}
						if (res.data.rows.length > 0) {
							this.pageNumber++; // 页码加1
						}
					}
				}).catch(error => {

					console.error('获取房源列表失败:', error);
					// 若刷新时出错，也停止下拉刷新动画
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
				});
			},
			async init() {
				this.loading = true

				this.loading = false
			},
			search() {
				if (this.$options.filters.tipsToLogin()) {
					uni.navigateTo({
						url: `/pages/navigation/search/searchHouse`,
					});
				}

			},
			goodsDetail(id) {

			},
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			async changeType(val) {
				this.type = val
				//await this.getInit(true)
			},
			bindSortId(data) {
				if (data.current == 3) {
					this.type = 5
				} else {
					this.type = data.current
				}
				//this.type=
				console.log(data)
				/* this.isSortType = data == -1 ? 0 : 1;
				this.getProductList(data);
				if (this.hostProduct.length == 0) {
				  this.get_host_product();
				} */
				this.tabCurrentIndex = data.current
				this.pageNumber = 1
				this.flowList = []
				this.findHouseRoomList(true);
			},
			gopage(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			goBack() {
				uni.navigateBack();
			},
			tabChange(idx) {
				this.tabCurrentIndex = idx;
				// 可根据tab切换请求不同类型数据
				
			
				    if (idx==3){
				      this.type=5
				    }else{
				      this.type=idx
				    }
				//this.type=
				    /* this.isSortType = data == -1 ? 0 : 1;
				    this.getProductList(data);
				    if (this.hostProduct.length == 0) {
				      this.get_host_product();
				    } */
				    // this.tabCurrentIndex = data.current
				    this.pageNumber=1
				    this.flowList=[]
				    this.findHouseRoomList(true);
				
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	$text-color-black: #3B3C3E; //黑
	@import "./search.scss";
	@import "./list.scss";

	.container {
		// background: url('@/static/home9/index/index-bg.png') no-repeat;
		background-size: 100% 50%;
	}

	.box_top {
		width: auto;
		height: auto;
		padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
		height: calc(var(--status-bar-height) + 210rpx);
		background: linear-gradient(to bottom, rgba(245, 231, 207, 1)rgba(245, 245, 245, 1));
		position: sticky;
		top: 0;
		z-index: 20;
		padding-bottom: 20rpx;
		// border-bottom: 2rpx #d9d9d9 solid;
		box-shadow: 0 0 0 2rpx #d9d9d97a;

		.top_title {
			padding-top: 28rpx;
			font-size: 32rpx;
			font-weight: 600;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.searchbar {
			width: 90%;
			margin: auto;
			margin-top: 24rpx;
			background-color: #FFF;
			display: flex;
			// justify-content: center;
			align-items: center;
			border-radius: 80rpx;
			padding: 0 24rpx;
		}


	}


	.content {
		padding: 0 30rpx;
	}

	// 文字颜色
	.travel-line {
		background-image: -webkit-linear-gradient(bottom, blue, #66b1ff, #50b7c1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	// 导航
	.nav-box {
		// width: 100%;
		padding: 10rpx 7rpx 3rpx;

		.row {
			display: flex;
			flex-wrap: wrap;
			// color: $text-color-assist;
			color: $text-color-black;
			//font-size: $uni-font-size-sm;
			padding-bottom: -40rpx;

			.grid {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// margin-bottom: 40rpx;
				margin-bottom: 10rpx;
				width: 25%;
				position: relative;

				.image {
					image {
						//width: 80rpx;
						//height: 80rpx;
						//margin-bottom: 20rpx;
						width: 54rpx;
						height: 54rpx;
						margin-bottom: 10rpx;
					}
				}

				.new-badage {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
				}
			}
		}
	}

	// 侧滑商品
	.slide__box {
		width: 100%;
		padding: 0 24rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.title {
			width: 100%;
			font-size: 34rpx;
			line-height: 34rpx;
			font-weight: 700;
			text-align: center;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			color: #333;

			.sub__title {
				color: #999;
				font-size: 28rpx;
				font-weight: 400;
				padding-left: 24rpx;
				padding-right: 20rpx;
			}

			.more {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
			}

			.cd {
				display: flex;
				align-items: center;

			}
		}

		.list {
			display: flex;
			align-items: center;

			.item {
				background-color: #fff;
				width: 160rpx;
				height: 260rpx;
				// width: 150rpx;
				// height: 230rpx;
				border-radius: 6rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				flex-shrink: 0;
				margin-right: 18rpx;

				.imgBox {
					width: 100%;
					// width: 150rpx;
					// height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;

					.img {
						// max-width: 150rpx;
						// max-height: 150rpx;
						max-height: 180rpx;
						display: block;
					}
				}

				.priceBox {
					max-width: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.price {
						display: flex;
						align-items: flex-end;
						padding: 10rpx 0 8rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						line-height: 28rpx;
						//color: #eb0909;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;

						.small {
							font-size: 28rpx;
							line-height: 24rpx;
							transform: scale(.8);
							transform-origin: 0 50%;
						}
					}
				}
			}
		}
	}

	.ad {
		display: flex;
		padding-top: 20rpx;

		text {
			position: absolute;
			z-index: 3;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 400;
			left: 0;
			bottom: 0;
			height: 2.4rem;
			line-height: 2.6rem;
			padding: 0 7%;
			width: 86%;
		}

		.left {
			position: relative;
			height: 360rpx;
			width: 49%;
			margin-right: 2%;
			border-radius: 12rpx 0 0 12rpx;
			overflow: hidden;

			.swiper,
			.bg {
				width: 100%;
				height: 100%;
				// height: 380rpx;
				// height: 280rpx;
				border-radius: 20rpx;
			}

			image {
				transform: scale(.93);
				transition: all .6s ease;
			}

			swiper-item.active {
				image {
					transform: scale(1);
				}
			}


			/* .intro {
      position: absolute;
      top: calc(50rpx + var(--status-bar-height));
      left: 40rpx;
      color: #FFFFFF;
      display: flex;
      flex-direction: column;

      .greet {
        font-size: $font-size-lg;
        margin-bottom: 10rpx;
      }

      .note {
        font-size: $font-size-sm;
      }
    } */

			.dots {
				position: absolute;
				// bottom: 140rpx;
				bottom: 10rpx;
				left: 50%;
				// 这里一定要注意兼容不然很可能踩坑
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
				// z-index: 99;
				display: flex;
				flex-direction: row;
				justify-content: center;

				.dot {
					width: 14rpx;
					height: 8rpx;
					transition: all .6s;
					background: rgba(255, 255, 255, 0.5);
					margin-right: 10rpx;
				}

				.active {
					width: 34rpx;
					height: 8rpx;
					background: #fff;
				}
			}

			image {
				height: 100%;
				width: 100%;
			}
		}

		.rihgt {
			height: 360rpx;
			width: 49%;

			.rihgt-top {
				display: flex;
				height: 175rpx;
				width: 100%;
				margin-bottom: 10rpx;
				border-radius: 0 12rpx 0 0;
				overflow: hidden;
				position: relative;

				image {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}

			.rihgt-end {
				position: relative;
				height: 175rpx;
				width: 100%;
				border-radius: 0 0 12rpx 0;
				overflow: hidden;

				image {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}
		}
	}

	.page-bottom {
		width: 100%;
		height: 200rpx;
		text-align: center;
		position: relative;
		display: flex;
		justify-content: center;
	}

	::v-deep .uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 20rpx 24rpx 0 24rpx;
		padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
		height: calc(var(--status-bar-height) + 210rpx);
		background: linear-gradient(to bottom, #ffe5c2, #f5f5f5);

		.back-btn,
		.right-icons {
			flex: 0 0 auto;
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}

		.right-icons {
			display: flex;
			gap: 16rpx;
		}
	}

	.tab-bar {
		display: flex;
		background: #f7f2ea;
		border-radius: 16rpx;
		margin: 24rpx 24rpx 0 24rpx;
		overflow: hidden;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #bfae9c;
		}

		.active {
			background: #fff;
			color: #3b3c3e;
			font-weight: bold;
		}
	}

	.search-section {
		background: #fff;
		margin: 24rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #f0e6d8;
		padding: 24rpx;

		.search-box {
			display: flex;
			align-items: center;
			border: 1rpx solid #f3d9b7;
			border-radius: 8rpx;
			padding: 8rpx 16rpx;
		}

		.search-input {
			flex: 1;
			border: none;
			outline: none;
			font-size: 28rpx;
			margin-left: 8rpx;
		}

		.radio-group {
			display: flex;
			gap: 24rpx;
			margin: 16rpx 0;
		}

		.search-actions {
			display: flex;
			align-items: center;
			gap: 24rpx;
		}

		.search-btn {
			flex: 1;
			background: #f7e1c6;
			color: #3b3c3e;
			border-radius: 8rpx;
		}

		.map-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}
	}

	.filter-bar {
		display: flex;
		background: #fff;
		margin: 0 24rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 8rpx #f0e6d8;

		.filter-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #3b3c3e;
		}
	}

	.house-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		padding: 24rpx;

		.house-card {
			width: 48%;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 8rpx #f0e6d8;
			margin-bottom: 24rpx;
			overflow: hidden;
			position: relative;
		}

		.house-img {
			width: 100%;
			height: 200rpx;
			object-fit: cover;
		}

		.tag {
			position: absolute;
			top: 16rpx;
			left: 16rpx;
			background: #ff5a5f;
			color: #fff;
			border-radius: 8rpx;
			padding: 4rpx 12rpx;
			font-size: 22rpx;
		}

		.house-title {
			font-size: 28rpx;
			font-weight: bold;
			margin: 16rpx 0 8rpx 0;
		}

		.house-desc {
			color: #888;
			font-size: 24rpx;
			margin-bottom: 8rpx;
		}

		.house-bottom {
			display: flex;
			align-items: flex-end;
			gap: 8rpx;
			margin-bottom: 16rpx;
		}

		.price {
			color: #ff5a5f;
			font-size: 32rpx;
			font-weight: bold;
		}

		.unit {
			color: #888;
			font-size: 22rpx;
		}
	}
</style>